<template>
  <div>
    <el-table
      :data="filmList"
      style="width: 100%">
      <el-table-column
        type="index"
        width="50"/>
      <el-table-column
        prop="name"
        label="电影名称"
        width="180">
      </el-table-column>
      
      <el-table-column
        label="图片"
        width="180">
        <template slot-scope="scope">
          <img class="img" :src="scope.row.poster"/>
        </template>
      </el-table-column>

      <el-table-column
        prop="actors"
        label="主演"
        width="180">
        <template slot-scope="scope">
            {{ scope.row.actors.map(obj => obj.name).join(',') }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
            <el-button type="danger" @click="toDel(scope.row.filmId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data(){
        return{
           filmList: [],
           currentPage:1,
           pageSize:10,
           total:0
        }
    },
    created(){
        console.log('created');
    },
    activated(){
        console.log('activated');
        this.getFimls()
    },
    methods:{
        toDel(id){
            console.log(id);
        },
        getFimls(){
            this.$axios({
                headers: {
                    'X-Host':'mall.film-ticket.film.list'
                },
                method: 'get',
                url: 'https://m.maizuo.com/gateway',
                params: {
                    cityId: 110100,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize, 
                    type: 1,
                    k: 7954491
                }
            }).then(res=>{
                console.log(res);
                this.filmList = res.data.data.films
                this.total = res.data.data.total
            })
        }
    }
  
}
</script>

<style scoped>
.img{
   width: 180px;
}
</style>